<template>
  <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body @close="cancel">
    <img :src="staticMapUrl" alt="Amap Static Map" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getMap } from '@/api/system/station'
  export default {
    name: "positionMap",
    props: {
      isOpen: false
    },
    data() {
      return {
        title: '',
        open: false,
        location: '116.397428,39.90923', // 经纬度
        zoom: 13, // 缩放级别
        size: '550*400', // 图片大小
        key: '7058e0ae002347c4d440bdbff5eea255', // 替换为你的 API Key
        markers: 'mid,,A:116.397428,39.90923',
        // 构建静态地图的URL
        staticMapUrl: ''
      }
    },
    methods: {
      show(row) {
        this.open = true
        this.title = row.stationName
        this.location = row.longitude+','+row.latitude
        this.markers = 'mid,,A:'+this.location

        this.buildStaticMapUrl()

      },
      cancel() {
        this.open = false
        this.$emit('close')
      },
      buildStaticMapUrl() {
        // 构建静态地图的URL
        this.staticMapUrl = `https://restapi.amap.com/v3/staticmap?location=${this.location}&zoom=${this.zoom}&size=${this.size}&markers=${this.markers}&key=${this.key}`;
      }
    }
  }
</script>

<style scoped>

</style>
